<template>
  <div style="width:100%;height:100%;display: flex;flex-direction: column;">
    <div style="flex-grow: 0">
      <a-form :model="paramForm">
        <a-form-item label="rtsp地址">
          <a-input v-model:value="paramForm.rtspUrl"></a-input>
          <a-button type="primary" @click="subscriptLive">订阅</a-button>
          <a-button type="primary" @click="unsubscriptLive">停止</a-button>
        </a-form-item>
      </a-form>
    </div>
    <div style="flex-grow: 1;border:1px #ccc solid;">
      <canvas ref="liveCanvasRef" style="width:100%;height:100%;" class="jsmepg"></canvas>
    </div>
  </div>
</template>
<script setup>
import {onMounted, ref} from "vue";
import request from "@/util/request.js";

let player
let liveCanvasRef = ref(null)
let paramForm = ref({rtspUrl: 'rtsp://192.168.5.20:5544/live0.264'});
onMounted(() => {
  // let canvas = liveCanvasRef.value;
  // player = new JSMpeg.Player("ws://localhost:5173/websocket/live/video/" + 1219042496, {canvas: canvas})
})

function subscriptLive() {
  if (paramForm.value.rtspUrl && typeof paramForm.value.rtspUrl === 'string' && paramForm.value.rtspUrl !== '') {
    let param = {
      source: paramForm.value.rtspUrl
    }
    request({
      method: 'post',
      url: '/live/api/live/subscribe',
      data: param
    }).then((response) => {
      if (response) {
        let canvas = liveCanvasRef.value;
        player = new JSMpeg.Player("ws://localhost:5173/websocket/live/video/" + response, {canvas: canvas})
      }
    });
  }
}

function unsubscriptLive() {
  console.log('不再订阅')
  player.destroy()
  let param = {
    source: paramForm.value.rtspUrl
  }
  request({
    method: 'post',
    url: '/live/api/live/unsubscribe',
    data: param
  }).then((response) => {
    console.log(response)
  });
}
</script>